<template>
  <div class="ImageResultWrap">
    <div class="contentWrap">
      <div class="wrap txtWrap" v-loading="Status>=100 && Status < 200" v-if="Status >= 300 || Status < 200">
        <div v-if="Status>=300" class="error">
          <div class="tips">图片生成失败，请重试</div>
        </div>
        <div v-else class="wait">
          <div class="tips">待生成图片</div>
        </div>
      </div>
      <div class='wrap' v-else>
        <el-image  class="img" :src="ResultUrl" fit="contain"></el-image>
      </div>
    </div>
    <div class="toolBar">
      <a href="#" class="btn" @click="toChangeType(6)" v-if="ToolType!==6">
        <el-image class="img" :fit="'contain'" :src="require('@/assets/images/icon_reimagine.png')"></el-image>
        <span class="txt">智能二创</span>
      </a>
      <a href="#" class="btn" @click="toChangeType(4)" v-if="ToolType!==4">
        <el-image class="img" :fit="'contain'" :src="require('@/assets/images/icon_remove_background.png')"></el-image>
        <span class="txt">背景消除</span>
      </a>
      <a href="#" class="btn" @click="toChangeType(5)" v-if="ToolType!==5">
        <el-image class="img" :fit="'contain'" :src="require('@/assets/images/icon_upscaling.png')"></el-image>
        <span class="txt">高清还原</span>
      </a>
      <a href="#" class="btn" @click="toChangeType(3)" v-if="ToolType!==3">
        <el-image class="img" :fit="'contain'" :src="require('@/assets/images/icon_face_swap.png')"></el-image>
        <span class="txt">素材换脸</span>
      </a>
      <a href="#" class="btn" @click="toChangeType(10)" v-if="ToolType!==10">
        <el-image class="img" :fit="'contain'" :src="require('@/assets/images/icon_change_background.png')"></el-image>
        <span class="txt">更换背景</span>
      </a>
      <a href="#" class="btn" @click="toChangeType(1001)" v-if="ToolType!==1001">
        <el-image class="img logo" :fit="'contain'" :src="require('@/assets/images/p.png')"></el-image>
        <span class="txt">模特换装</span>
      </a>
      <a href="#" class="btn" @click="showChatView">
        <el-image class="img logo" :fit="'contain'" src="http://lilithai.msyc.cc/pro-api/data/admin-upload/24012413444069823.jpg"></el-image>
        <span class="txt">文案创作</span>
      </a>
      <!-- 选择机器人分类 -->
      <chatView :isChatViewVisible="isChatViewVisible" @closeChoseItem='closeChoseItem'></chatView>
    </div>
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .ImageResultWrap .contentWrap{margin-left: 12px;}
  .ImageResultWrap .txtWrap{ display: flex; justify-content: center; align-items: center; color: #999;}
</style>

<script>
import chatView from '@/components/element/chatView'
import PromptSelecter from '../element/PromptSelecter.vue'
export default {
  name: 'SignalImageResult',
  components: { PromptSelecter ,chatView},
  props: {
    /* { "tabId": 1, "title": "常用", "basePrompt": "", "baseParm": "", "sessionGroup": [ 1 ] }*/
    Status:{ 
      type: Number,
      default: 0//0:waitting,100:loading,200:success,300:error
    },
    ResultUrl:{
      type: String,
      default: ''
    },//0, 首页：算力点数; 1 文生图; 2 智能拼图; 3 素材换脸; 4 抠图; 5 高清还原; 6 图片智能二创; 7 涂抹消除; 8 文本消除; 9 扩图重构; 10 换背景; 11 手绘生图12 文生图（MidjourneyBot） 1001模特换装,示例值(1)
    ToolType: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      SelectedPrompt:[],
      isChatViewVisible: false // 控制子组件的显示和隐藏
    }
  },
  mounted(){
    this.isChatViewVisible=false
  },
  methods: {
    // 关闭选择机器人
    closeChoseItem(e){
      this.isChatViewVisible=e
      console.log(e,'closeChoseItem');
    },
    SelecterChange(e){
      console.log(e);
      if(e.optionId == -1){
        this.SelectedPrompt = this.SelectedPrompt.filter(sel => sel.selecterId != e.selecterId);
      }else{
        var hasRecord = false;
        for(var i = 0; i < this.SelectedPrompt.length; i++){
          if(this.SelectedPrompt[i].selecterId == e.selecterId){
            console.log('setted')
            this.SelectedPrompt[i] = JSON.parse(JSON.stringify(e));
            hasRecord = true
          }
        }
        if(!hasRecord){
          this.SelectedPrompt.push(e)
        }
        this.$emit('change',{
          groupId: this.Session.groupId,
          data: this.SelectedPrompt
        });
      }
    },
    // 跳到下一步编辑模块
    toChangeType(type) {
      if (!this.ResultUrl || this.ResultUrl==='') {
        return false
      }
      this.$emit('ChangeType', {type, imageUrl: this.ResultUrl})
      return false
    },
    // 展示聊天
    showChatView(){
      this.isChatViewVisible = true; // 点击按钮后显示子组件
      console.log("点击按钮后显示子组件");
    }
  }
}
</script>
